<template>
  <div class="Chip_RmenuItem">
    <div
      v-for="(it, i) in rmenu"
      :key="i"
      class="rmenuBtn hb"
      :class="{ disable: it.disable }"
      :style="{ color: it.color || '#333' }"
      @click="it.disable ? null : menuClick(it.cb)"
    >
      <div class="flexMode vc">
        <div class="iconArea fs16">
          <Icon
            v-if="['colorful', '', undefined, null].indexOf(it.type) > -1"
            :meta="it.icon"
          />
          <i
            v-else
            :class="it.icon"
            :style="{ color: it.iconColor || 'rgba(0,0,0,.5)' }"
          />
        </div>
        <span class="txt-nowrap lh10">{{ it.label }}</span>
      </div>
      <template v-if="it.children">
        <i class="win win-arrow-right txt-dark3" />
        <div class="subrmenuBtn" :class="direction">
          <RmenuItem :rmenu="it.children" />
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "Chip_RmenuItem",
  props: {
    rmenu: {
      type: Array,
      default: () => [],
    },
    direction: {
      type: String,
      default: "",
    },
  },
  methods: {
    menuClick(cb = () => {}) {
      cb()
      this.$store.commit("desk/saveRmenu", false)
    },
  },
}
</script>
<style lang="scss" scoped>
.rmenuBtn {
  padding: 0.5rem 1rem;
  font-size: 13px;
  height: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: $trans1;
  position: relative;
  .iconArea {
    width: 24px;
    flex-shrink: 0;
  }
  &.disable {
    opacity: 0.3;
  }
  .subrmenuBtn {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.5rem;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: $trans1;
    &.lt {
      top: 0;
      right: 100%;
      border-radius: 0.25rem 0 0 0.25rem;
    }
    &.rt {
      top: 0;
      left: 100%;
      border-radius: 0 0.25rem 0.25rem 0;
    }
    &.lb {
      bottom: 0;
      right: 100%;
      border-radius: 0.25rem 0 0 0.25rem;
    }
    &.rb {
      bottom: 0;
      left: 100%;
      border-radius: 0 0.25rem 0.25rem 0;
    }
  }
  &:hover {
    background-color: #f0f0f0;
    .subrmenuBtn {
      width: 180px;
    }
  }
}
</style>
